<template>
  <Card>
    <div id="outMaterial">
      <div class="title">
        <Icon size="18" type="md-list-box"/>
        排名
        <Divider/>
      </div>
      <div class="from">
        <Form ref="form" :label-width="170" :model="form" :rules="formValidate" inline>
          <div class="fromTitle">基础信息</div>
          <FormItem label="车牌号：" prop="license_plate_num" style="width:49%;">
            <Input v-model="form.license_plate_num" disabled placeholder="请输入车牌号"/>
          </FormItem>
          <Form-item label="线路：" prop="line" style="width:49%;">
            <Input v-model="form.line" disabled placeholder/>
          </Form-item>
          <Form-item label="月份：" prop="date" style="width:49%;">
            <DatePicker
              v-model="form.date"
              disabled
              placeholder="请选择月份"
              placement="bottom-start"
              style="width:100%"
              type="month"
            ></DatePicker>
          </Form-item>
          <FormItem label="得分" style="width:49%;">
            <Input v-model="form.total_grade" disabled/>
          </FormItem>
          <FormItem label="名次：" style="width:49%;">
            <Input v-model="form.ranking" disabled/>
          </FormItem>
          <FormItem label="奖励/处罚：" style="width:49%;">
            <Input v-model="form.reward_punish_text" disabled/>
          </FormItem>
          <FormItem label="应奖/惩金额：" style="width:49%;">
            <Input v-model="form.should_reward_punish" disabled/>
          </FormItem>
          <FormItem label="实际奖/惩金额：" style="width:49%;">
            <Input v-model="form.real_reward_punish" placeholder="实际奖/惩金额"/>
          </FormItem>
          <FormItem label="司机：" style="width:49%;">
            <Input v-model="form.driver" disabled/>
          </FormItem>
          <FormItem label="出勤天数：" style="width:49%;">
            <Input v-model="form.work_day" disabled/>
          </FormItem>
          <FormItem label="元/天：" style="width:49%;">
            <Input v-model="form.day_money" disabled/>
          </FormItem>
          <FormItem label="奖惩金额：" style="width:49%;">
            <Input v-model="form.reward_punish_money" disabled/>
          </FormItem>
          <FormItem label="备注：" style="width:49%;">
            <Input v-model="form.remarks" placeholder="请输入备注" type="textarea"/>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button :loading="loading" @click="cancel('form')">重置</Button>
          <Button
            :loading="submitLoading"
            style="margin-left:8px"
            type="primary"
            @click="handleSubmit('form')"
          >保存
          </Button>
        </div>
      </div>
    </div>
  </Card>
</template>
<script>
import {editEleTaskRank, eleTaskRankInfo} from '../../api/eleTaskSalary'

export default {
  data() {
    return {
      submitLoading: false,
      loading: false,
      form: {},
      formValidate: {}
    }
  },
  watch: {
    $route: 'getTaskRankInfo'
  },
  mounted() {
    this.getTaskRankInfo()
  },
  methods: {
    cancel() {
      this.form = {}
    },
    getTaskRankInfo() {
      if (this.$route.params.id) {
        this.loading = true
        eleTaskRankInfo({id: this.$route.params.id}).then(res => {
          this.loading = false
          this.form = res.data.result
        })
      }
    },
    handleSubmit(name) {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.id = this.$route.params.id
          this.submitLoading = true
          editEleTaskRank(this.form).then(res => {
            this.submitLoading = false
            if (res.data) {
              this.$Message.success(res.message)
              this.$store.commit('closeTag', 'editEleSalaryRank')
              this.$router.push({
                name: 'eleSalaryRank'
              })
            } else {
              this.$Message.error(res.message)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.ivu-row .ivu-col .ivu-form-item {
  width: 100%;
}
</style>
